<template>
  <view class="failure-page">
    <!-- 失败图标 -->
    <view class="failure-icon">
      <view class="icon-circle"></view>
      <view class="icon-cross"></view>
    </view>

    <!-- 提示文字 -->
    <view class="failure-text">
      <text class="title">提交失败</text>
      <text class="subtitle">请检查信息后重新提交</text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-btn">
      <button @click="goBack">返回修改</button>
    </view>
  </view>
</template>

<script setup>
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss">
.failure-page {
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;

  .failure-icon {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 60rpx;

    .icon-circle {
      width: 100%;
      height: 100%;
      background: #ff5252;  // 红色警示色
      border-radius: 50%;
      animation: shake 0.6s ease-out;
    }

    .icon-cross {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 80rpx;
      height: 80rpx;
      
      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 8rpx;
        background: #fff;
        top: 50%;
        left: 0;
      }
      
      &::before {
        transform: translateY(-50%) rotate(45deg);
      }
      
      &::after {
        transform: translateY(-50%) rotate(-45deg);
      }
    }
  }

  .failure-text {
    text-align: center;
    .title {
      display: block;
      font-size: 40rpx;
      color: #ff5252;  // 红色强调
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .subtitle {
      font-size: 28rpx;
      color: #666;
    }
  }

  .action-btn {
    position: fixed;
    bottom: 80rpx;
    width: 80%;
    button {
      background: #ff5252;  // 红色按钮
      color: white;
      border-radius: 48rpx;
      font-size: 32rpx;
      height: 88rpx;
      line-height: 88rpx;
    }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-5px); }
  }
}
</style>